<template>
  <div>
    <el-table  highlight-current-row :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
      <el-table-column v-for="(item, idx) in columnList" :key="idx" :property="item.property" :label="item.columnLable">
        <template slot-scope="scope">
          <el-checkbox @change="ckchanged(tableData,scope.$index,item.property)" v-model="tableData[scope.$index][item.property+'_status']">{{tableData[scope.$index][item.property]}}</el-checkbox>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="id" width="180">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.id">{{scope.row.id}}</el-checkbox>
        </template>
      </el-table-column>
      <el-table-column prop="name">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.name">{{scope.row.name}}</el-checkbox>
        </template>
      </el-table-column>
      <el-table-column prop="amount1">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.amount1">{{scope.row.amount1}}</el-checkbox>
        </template>
      </el-table-column>
      <el-table-column prop="amount2">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.amount2">{{scope.row.amount2}}</el-checkbox>
        </template>
      </el-table-column>
      <el-table-column prop="amount3">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.amount3[1]">{{scope.row.amount3[0]}}</el-checkbox>
        </template>
      </el-table-column> -->
    </el-table>
  </div>
</template>

<script> 
import {
    getList,
} from "@/api/setting/setting";
  export default {
    data() {
      // alert(this.columnList);
      return {
        0: this.columnList,
        1: this.tableData,
        column_row_offset: {
          c1: [3, 1, 1],
          c2: [2, 1, 1, 1],
          c3: [1, 1, 1, 1, 1],
          c4: [1, 1, 1, 1, 1],
          c5: [1, 1, 1, 1, 1]
        },
        now_rows: {},
        now_rows_values: {},
        now_rows_status: {
          c1: [],
          c2: [],
          c3: [],
          c4: [],
          c5: []
        },
      };
    },
    beforeCreate() {

      this.columnList = [];
      this.tableData = [];
      for (var k = 0; k < 5; k++) {
        this.columnList[k] = {};
        this.columnList[k]["property"] = "c" + (k + 1);
        this.columnList[k]["columnLable"] = "clable" + (k + 1);
      }
      for (var i = 0; i < 5; i++) {
        this.tableData[i] = {};
        for (let j = 0; j < this.columnList.length; j++) {
          var name = this.columnList[j].property;
          this.tableData[i][name] = "sfgsg" + i;
          this.tableData[i][name + "_status"] = true;
          // Vue.set(this.tableData[i], name, "sfgsg");
          // Vue.set(this.tableData[i], name+ "_status", true);
        }
        // this.tableData[i] = Object.assign({}, this.tableData[i]);
      }
    },
    created() {
    },

    methods: {
      fetchData() {
        getList(this.formInline).then(response => {
          this.list = response;
          this.listLoading = false;
        }).catch(res=>{
            this.listLoading=false;
        })
      },

      ckchanged(data, row, colname) {
        // alert(row+"  "+col);
        data[0][colname + "_status"] = false;
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (!this.now_rows[column.property]) {
          this.now_rows_values[column.property] = this.column_row_offset[column.property].shift();
          this.now_rows[column.property] = this.now_rows_values[column.property];
        } else if ((rowIndex + 1) > this.now_rows[column.property]) {
          this.now_rows_values[column.property] = this.column_row_offset[column.property].shift();
          this.now_rows[column.property] += this.now_rows_values[column.property];
        }
        if (this.now_rows_status[column.property][rowIndex] >= 0) {
          return {
            rowspan: this.now_rows_status[column.property][rowIndex],
            colspan: 1
          };
        } else if (!this.now_rows_status[column.property][rowIndex] && rowIndex % this.now_rows_values[column.property] === 0) {
          this.now_rows_status[column.property][rowIndex] = this.now_rows_values[column.property];
          // alert(this.now_rows_values[column.property] + '   ' + rowIndex + '      ' + column.property)
          return {
            rowspan: this.now_rows_values[column.property],
            colspan: 1
          };
        } else {
          this.now_rows_status[column.property][rowIndex] = 0;
          return {
            rowspan: 0,
            colspan: 1
          };
        }
      }
    }
  };
</script>